<html>

<head>


  <meta charset="utf-8">

  <meta name="referrer" content="no-referrer">

  <link rel="stylesheet" type="text/css" href="a.css">

  <title>淘宝静态网页</title>

</head>


<body>




  <!-- ！！！！第一部分：导航条和广告。！！！！！！！！ -->



  <div class="wrapper">

    <!-- 导航条+AD(广告图片)的父级，即是一个容器，包含导航条和广告。-->
    <div class="top-nav-wrap">



      <!-- 导航条 -->
      <div class="top-nav">

        <!-- 导航条左边部分 -->
        <ul class="top-nav-left">


        <!-- 设置相同的类名是为了设置一样的样式，不同的则是
        不同的样式。 -->

        <li class="top-nav-menu china">

          <span class="c-span">中国大陆</span>

          <!-- 这是那个小三角图标，下面有还是这样写。 -->
          <span class="bg-pic xsj-pic"></span>

        </li>




<!--这部分有自己的样式，所以在同样的
  类名上在加一个属于自己的类名。 -->

  <li class="top-nav-menu login-sign">

    <a href="https://login.taobao.com/member/login.jhtml?spm=a21bo.2017.754894437.1.5af911d9poNLcM&f=top&redirectURL=https%3A%2F%2Fwww.taobao.com%2F"  class="login">亲，请登录</a>

    <a href="https://reg.taobao.com/member/reg/fill_mobile.htm"
    class="sign">免费注册</a>       

  </li>




  <li class="top-nav-menu">

    <a href="https://mpage.taobao.com/hd/download.html?spm=a21bo.2017.1997563273.1.5af911d9sbdTSd">手机逛淘宝</a>

  </li>


</ul>






<!-- 导航条右边部分。 -->
<ul class="top-nav-right">




  <!-- 我的淘宝部分 -->

  <li class="top-nav-menu my-taobao">

    <a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fi.taobao.com%2Fmy_taobao.htm%3Fspm%3Da21bo.2017.1997525045.1.5af911d9JIYZR3"


    >我的淘宝</a>

    <!-- 小三角图标部分。 -->
    <span class="bg-pic xsj-pic"></span>

  </li>






  <!-- 购物车部分 -->
  <li class="top-nav-menu shop-car">



   <a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fcart.taobao.com%2Fcart.htm%3Fspm%3Da21bo.2017.1997525049.1.5af911d9tcIdwO%26from%3Dmini%26pm_id%3D1501036000a02c5c3739">

    <span class="bg-pic shopCar-pic"></span>
    <span >购物车</span>


  </a>

  <!-- 小三角图标部分。 -->
  <span class="bg-pic xsj-pic"></span>

</li>


<!-- 收藏夹部分 -->

<li class="top-nav-menu like">

  <a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fshoucang.taobao.com%2Fitem_collect_n.htm%3Fspm%3Da21bo.2017.1997525053.1.5af911d9pMan4B">

   <span class="bg-pic like-pic"></span>
   <span>收藏夹</span>

 </a>

 <span class="bg-pic xsj-pic"></span>

</li>


<!-- 商品分类部分 -->
<li class="top-nav-menu goods">

  <a href="https://www.taobao.com/tbhome/page/market-list?spm=a21bo.2017.1997563209.1.5af911d9xNlFNH">商品分类</a>

</li>






<li class="top-nav-menu cut-off">

  <span>|</span>


</li>



<!-- 卖家中心部分。 -->
<li class="top-nav-menu seller">

  <a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fmyseller.taobao.com%2Fseller_admin.htm">

   <span>卖家中心</span>

   <span class="bg-pic xsj-pic"></span>

 </a>


</li>



<!-- 联系客服部分 -->

<li class="top-nav-menu cutsomer">


 <a href="https://consumerservice.taobao.com/?spm=a21bo.7723600.754895749.1.5df25ec97TxRJS">联系客服</a>


 <!-- 小三角图标部分。 -->
 <span class="bg-pic xsj-pic"></span>


</li>






<!-- 网站导航部分 -->
<li class="top-nav-menu web-nav">

  <a href="https://www.taobao.com/tbhome/page/sitemap?spm=a21bo.7723600.1997525077.1.5df25ec98aul0B">

   <span class="bg-pic web-nav-pic"></span>
   <span>网站导航</span>




 </a>
 <!--  -->

 <span class="bg-pic xsj-pic"></span>


</li>

</ul>

</div>





<!-- 广告父容器，包含广告。 -->
<!-- <div class="ad-wrap"> -->


<!-- 广告。 -->
  <!--  <div class="ad">


     <a href="https://pages.tmall.com/wow/a/act/tmall/22204/pageFrame?spm=a21bo.2017.1112.1.5af911d9poNLcM&wh_biz=tm&wh_weex=true&wx_main_hc=true&wh_bizStageId=518">

      <img src="C:/Users/ASUS/Downloads/gg.jpg">
    </a> -->



 <!--   </div>
   


</div> -->


</div>



<!-- ！！！！第一部分：导航条和广告。！！！！！！！！ -->

<!-- !!!!!!!第一部分结束.!!!!!! -->









<!-- 动态logo部分+搜索区+二维码部分 -->
<!-- 这里是总体的容器部分。 -->
<div class="search-wrap">

  <!-- 这个是内容部分的容器 -->
  <div class="search-con" >


    <!-- 动态图部分 -->
    <div class="logo-box"></div>


<!-- 搜索部分：这里是分成了两个部分，
 上边和下边部分。-->
 <!-- 总体容器部分 -->
 <div class="search-box">


  <!-- 上边部分：三个选择和搜索条部分。 -->
  <!-- 这是它们两个的容器 -->
  <div class="search-top">

    <div class="search-tab">

     <ul>

      <li class="select">宝贝</li>
      <li>天猫</li>
      <li>店铺</li>

    </ul>

  </div>


  <!-- 搜索框部分的父级 -->
  <div class="search-panel">


    <!-- 放大镜图标 -->
    <a href="" class="suosuo"></a>


    <!-- form:表单 -->
    <form action="">


      <!-- 这是搜索按钮的容器。 -->
      <div class="btn">

        <button class="submit">搜索</button>

      </div>

      <div class="search-input-box">

        <div class="search-input">

          <!-- placeholder：未输入内容时的黑色文本。 -->
          <input type="text" placeholder="荣耀10降价">

        </div>

      </div>

    </form>



    <!-- 照相机图标 -->
    <a href="" class="camera"></a>

  </div>

</div>


<!-- 下边部分容器：list部分用a标签来做。 -->

<div class="search-bl">

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.1.5af911d9VnsoWK&q=%E8%BF%9E%E8%A1%A3%E8%A3%99&refpid=420460_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f66">新款连衣裙</a>


  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.2.5af911d9VnsoWK&q=%E5%9B%9B%E4%BB%B6%E5%A5%97&refpid=420461_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f67">四件套</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.3.5af911d9VnsoWK&q=T%E6%81%A4&refpid=420462_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f67" class="a-select">潮流T恤</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.4.5af911d9VnsoWK&q=%E5%A5%B3%E9%9E%8B&refpid=420466_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f68">时尚女鞋</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.5.5af911d9VnsoWK&q=%E7%9F%AD%E8%A3%A4&refpid=430145_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f69">短裤</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.6.5af911d9VnsoWK&q=%E5%8D%8A%E8%BA%AB%E8%A3%99&refpid=430146_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f70"
  class="a-select"
  >半身裙</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.7.5af911d9VnsoWK&q=%E7%94%B7%E5%A3%AB%E5%A4%96%E5%A5%97&refpid=430147_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f70">男士外套</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.8.5af911d9VnsoWK&q=%E5%A2%99%E7%BA%B8&refpid=430148_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f70">墙纸</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.9.5af911d9VnsoWK&q=%E8%A1%8C%E8%BD%A6%E8%AE%B0%E5%BD%95%E4%BB%AA&refpid=420467_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f69">行车记录仪</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.10.5af911d9VnsoWK&q=%E7%94%B7%E9%9E%8B&refpid=430144_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f69"
  class="a-select"
  >新款男鞋</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.11.5af911d9VnsoWK&q=%E8%80%B3%E6%9C%BA&refpid=420463_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f67">耳机</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.12.5af911d9VnsoWK&q=%E5%A5%B3%E5%8C%85&refpid=420464_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f68">时尚女包</a>

  <a href="https://s.taobao.com/search?spm=a21bo.2017.201856-fline.13.5af911d9VnsoWK&q=%E6%B2%99%E5%8F%91&refpid=420465_1006&source=tbsy&style=grid&tab=all&pvid=d0f2ec2810bcec0d5a16d5283ce59f68">沙发</a>






</div>

</div>







<!-- 二维码部分 -->
<div class="code-box">




<a href="https://mpage.taobao.com/hd/download.html?spm=a21bo.2017.201858.1.5af911d9VnsoWK" class="phone">手机淘宝</a>

<a href="https://mpage.taobao.com/hd/download.html?spm=a21bo.2017.201858.1.5af911d9R1zGSz" class="code"></a>

<a href="" class="close">X</a>







</div>










<!-- 中间部分的导航条的容器      screen：屏幕。 -->
<div class="screen-nav">

<div class="screen-nav-content">

<h2>主题市场</h2>

<ul>

<li><a href="https://www.tmall.com/?spm=a21bo.2017.201859.1.5af911d9wd8PVn">天猫</a></li>

<li><a href="https://ju.taobao.com/?spm=a21bo.2017.201859.2.5af911d9wd8PVn">聚划算</a></li>

<li><a href="https://chaoshi.tmall.com/?targetPage=index&spm=a21bo.2017.201859.3.5af911d9wd8PVn">天猫超市</a></li>

</ul>



<ul>

<li class="xhx">|</li>
<li><a href="https://qiang.taobao.com/?spm=a21bo.2017.201859.4.5af911d9wd8PVn">淘抢购</a></li>

<li><a href="https://3c.tmall.com/?spm=a21bo.2017.201859.5.5af911d9wd8PVn">电器城</a></li>

<li><a href="https://sf.taobao.com/?spm=a21bo.2017.201859.6.5af911d9wd8PVn">司法拍卖</a></li>

<li><a href="https://good.tmall.com/?spm=a21bo.2017.201859.7.5af911d9wd8PVn">淘宝心选</a></li>

<li><a href="https://www.taobao.com/markets/xt/znfp?spm=a21bo.2017.201859.8.5af911d9wd8PVn">兴农扶贫</a></li>

</ul>


<ul>

<li class="xhx">|</li>
<li><a href="https://www.fliggy.com/?spm=a21bo.2017.201859.9.5af911d9wd8PVn">飞猪旅行</a></li>

<li><a href="https://suning.tmall.com/?spm=a21bo.2017.201859.11.5af911d9wd8PVn">苏宁易购</a></li>

<li><a href="https://zhineng.tmall.com/">智能生活</a></li>

</ul>



</div>
</div>











<!-- 屏幕主体展示部分。 -->
<!-- 最外面的总容器 -->
<div class="screen-box">



<!-- 先总体分为两部分：main(左)和 col-right(右)-->
<div class="main">

<!-- 左边再分为两部分：main-inner(上)和main-buttom(下)。 -->

<!-- 上面部分又分为左中右三部分。 -->
<div class="main-inner">



<!-- 左边的listview部分。 -->
<div class="inner-left">

<ul>

  <li>
    <a href="https://www.taobao.com/markets/nvzhuang/taobaonvzhuang?spm=a21bo.2017.201867-main.1.5af911d9ofKQan">女装</a> /

    <a href="https://www.taobao.com/markets/nanzhuang/2017new?spm=a21bo.2017.201867-main.2.5af911d9ofKQan">男装</a> /

    <a href="https://neiyi.taobao.com/?spm=a21bo.2017.201867-main.3.5af911d9ofKQan">内衣</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>

  <li>
    <a href="https://www.taobao.com/markets/xie/nvxie/index?spm=a21bo.2017.201867-main.4.5af911d9ofKQan">鞋靴</a> /
    <a href="https://www.taobao.com/markets/bao/xiangbao?spm=a21bo.2017.201867-main.5.5af911d9ofKQan">箱包</a> /
    <a href="https://pei.taobao.com/?spm=a21bo.2017.201867-main.6.5af911d9ofKQan">配件</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>


  <li>
    <a href="https://www.taobao.com/markets/qbb/index?spm=a21bo.2017.201867-main.7.5af911d9ofKQan&pvid=b9f2df4c-6d60-4af4-b500-c5168009831f&scm=1007.12802.34660.100200300000000">童装玩具</a> / 
    <a href="https://www.taobao.com/markets/qbb/index?spm=a21bo.2017.201867-main.8.5af911d9ofKQan&pvid=b9f2df4c-6d60-4af4-b500-c5168009831f&scm=1007.12802.34660.100200300000000">孕产</a> /
    <a href="https://www.taobao.com/markets/qbb/index?spm=a21bo.2017.201867-main.9.5af911d9ofKQan&pvid=b9f2df4c-6d60-4af4-b500-c5168009831f&scm=1007.12802.34660.100200300000000">用品</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>


  <li>
    <a href="https://www.taobao.com/markets/3c/tbdc?spm=a21bo.2017.201867-main.10.5af911d9ofKQan">家电</a> /
    <a href="https://www.taobao.com/markets/3c/tbdc?spm=a21bo.2017.201867-main.11.5af911d9ofKQan">数码</a> /
    <a href="https://www.taobao.com/markets/3c/tbdc?spm=a21bo.2017.201867-main.12.5af911d9ofKQan">手机</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>

  <li>
    <a href="https://mei.taobao.com/?spm=a21bo.2017.201867-main.13.5af911d9ofKQan">美妆</a> /
    <a href="https://www.taobao.com/market/baihuo/xihuyongpin.php?spm=a21bo.2017.201867-main.14.5af911d9ofKQan">洗护</a> /
    <a href="https://g.taobao.com/brand_detail.htm?spm=a21bo.2017.201867-main.15.5af911d9ofKQan&navigator=all&_input_charset=utf-8&q=%E8%90%A5%E5%85%BB%E5%93%81">保健品</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>

  <li>
    <a href="https://www.taobao.com/market/peishi/zhubao.php?spm=a21bo.2017.201867-main.16.5af911d9ofKQan">珠宝</a> /
    <a href="https://www.taobao.com/market/peishi/yanjing.php?spm=a21bo.2017.201867-main.17.5af911d9ofKQan">眼镜</a> /
    <a href="https://www.taobao.com/market/peishi/shoubiao.php?spm=a21bo.2017.201867-main.18.5af911d9ofKQan">手表</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>


  <li>
    <a href="https://www.taobao.com/markets/coolcity/coolcityHome?spm=a21bo.2017.201867-main.19.5af911d9ofKQan">运动</a> /
    <a href="https://www.taobao.com/markets/coolcity/coolcityHome?spm=a21bo.2017.201867-main.20.5af911d9ofKQan">户外</a> /
    <a href="https://www.taobao.com/markets/amusement/home?spm=a21bo.2017.201867-main.21.5af911d9ofKQan">乐器</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>


  <li>
    <a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.22.5af911d9ofKQan&q=%E6%B8%B8%E6%88%8F&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&ie=utf8&initiative_id=tbindexz_20170306">游戏</a> /
    <a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.23.5af911d9ofKQan&q=%E5%8A%A8%E6%BC%AB&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20181010&ie=utf8">动漫</a> /
    <a href="https://www.taobao.com/markets/acg/yingshi?spm=a21bo.2017.201867-main.24.5af911d9ofKQan">影视</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>


  <li>
    <a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.25.5af911d9ofKQan&q=%E7%BE%8E%E9%A3%9F&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20180724&ie=utf8">美食</a> /
    <a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.26.5af911d9ofKQan&ie=utf8&initiative_id=staobaoz_20180724&stats_click=search_radio_all%3A1&js=1&imgfile=&q=%E7%94%9F%E9%B2%9C&suggest=history_1&_input_charset=utf-8&wq=%E7%94%9F%E9%B2%9C&suggest_query=%E7%94%9F%E9%B2%9C&source=suggest">生鲜</a> /
    <a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.27.5af911d9ofKQan&q=%E9%9B%B6%E9%A3%9F&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&ie=utf8&initiative_id=tbindexz_20170306">零食</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>



  <li>
    <a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.28.5af911d9ofKQan&q=%E5%9B%AD%E8%89%BA&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&ie=utf8&initiative_id=tbindexz_20170419">鲜花</a> /
    <a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.29.5af911d9ofKQan&ie=utf8&initiative_id=staobaoz_20170419&stats_click=search_radio_all%3A1&js=1&imgfile=&q=%E8%BF%9B%E5%8F%A3%E7%8B%97%E7%B2%AE&suggest=history_3&_input_charset=utf-8&wq=&suggest_query=&source=suggest">宠物</a> /
    <a href="https://s.taobao.com/search?spm=a21bo.2017.201867-main.30.5af911d9ofKQan&q=%E5%86%9C%E8%B5%84&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&ie=utf8&initiative_id=tbindexz_20170221">农资</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>



  <li>
    <a href="https://wujin.taobao.com/?spm=a21bo.2017.201867-main.31.5af911d9ofKQan">工具</a> /
    <a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.32.5af911d9ofKQan&source=youjia&cat=50097129">装修</a> /
    <a href="https://www.jiyoujia.com/markets/youjia/zhuangxiucailiao?spm=a21bo.2017.201867-main.33.5af911d9ofKQan">建材</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>



  <li>
    <a href="https://www.jiyoujia.com/markets/youjia/zhuangxiucailiao?spm=a21bo.2017.201867-main.33.5af911d9ofKQan">家具</a> /
    <a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.35.5af911d9ofKQan&source=youjia&cat=50065206%2C50065205">家饰</a> /
    <a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.36.5af911d9ofKQan&source=youjia&cat=50008163&bcoffset=0&s=240">家纺</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>


  <li>
    <a href="https://car.tmall.com/wow/car/act/carfp?spm=a21bo.2017.201867-main.37.5af911d9ofKQan">汽车</a> /
    <a href="https://www.taobao.com/markets/paimai/ali2car?spm=a21bo.2017.201867-main.38.5af911d9ofKQan">二手车</a> /
    <a href="https://car.tmall.com/wow/car/act/carfp?spm=a21bo.2017.201867-main.39.5af911d9ofKQan">用品</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>


  <li>
    <a href="https://www.taobao.com/markets/bangong/pchome?spm=a21bo.2017.201867-main.40.5af911d9ofKQan&wh_ttid=pc">办公</a> /
    <a href="https://www.taobao.com/markets/dingzhi/home?spm=a21bo.2017.201867-main.41.5af911d9ofKQan&wh_ttid=pc">DIY</a> /
    <a href="https://www.taobao.com/markets/wujin/pchome?spm=a21bo.2017.201867-main.42.5af911d9ofKQan&wh_ttid=pc">五金电子</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>



  <li>
    <a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.43.5af911d9ofKQan&source=youjia&q=%E7%99%BE%E8%B4%A7">百货</a> /
    <a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.44.5af911d9ofKQan&source=youjia&cat=50035867&bcoffset=0&s=240">餐厨</a> /
    <a href="https://www.taobao.com/markets/promotion/tbbj?spm=a21bo.2017.201867-main.45.5af911d9ofKQan">家庭保健</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>



  <li>
    <a href="https://xue.taobao.com/?spm=a21bo.2017.201867-main.46.5af911d9ofKQan">学习</a> /
    <a href="https://ka.taobao.com/?spm=a21bo.2017.201867-main.47.5af911d9ofKQan">卡卷</a> /
    <a href="https://s.taobao.com/list?spm=a21bo.2017.201867-main.48.5af911d9ofKQan&q=%E4%B8%8A%E9%97%A8%E6%9C%8D%E5%8A%A1&cat=50097750">本地服务</a>
    <!-- 这个span标签是用来放置哪个三角图标的 -->
    <span class="sanjiao"></span>
   
  </li>

</ul>



</div>


<!-- 总体左边上部分的中间图片部分 -->
<div class="inner-center">


<div class="pic-box">
<a href="https://detail.tmall.com/item.htm?id=565610359551&skuId=3747445030002&ali_trackid=30_adaeee32a1550d352dd7685a3c9130c6&spm=a21bo.2017.201862-3.1">

<img src="https://img.alicdn.com/simba/img/TB1Upv5XWSs3KVjSZPiSuwsiVXa.jpg " width="520px" height="280px">

</a>

</div>


<div class="inner-mall">


<div class="head">

<img src="C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/tm.png">

<span class="tm">理想生活上天猫</span>

</div>



<a href="https://mei.taobao.com/?spm=a21bo.2017.201867-main.13.5af911d9oX3xRx">

<img src="C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/pic3.png">
</a>



</div>





</div>

<div class="inner-right">

<div class="top">


<a href="https://s.taobao.com/search?q=%E7%BE%8E%E5%A6%86&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&spm=a21bo.2017.201856-taobao-item.1&ie=utf8&initiative_id=tbindexz_20170306">


  <img src="C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/pic1.png"></a>


</div>





<div class="buttom">

  <div class="hot">

  <span>今日热卖</span>



</div>

<a href="https://s.taobao.com/search?q=%E7%8F%80%E8%8E%B1%E9%9B%85&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20190525&ie=utf8"><img src="C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/pic4.png"></a>


</div>


</div>





</div>

<!-- 总体左部分的下面部分 -->
<div class="main-buttom">

<div class="content">


<!-- 左边图片部分 -->
<div class="login-box">




</div>


<!-- 右边都是被a标签包裹的图片和文字段落和标题。 -->
<a href="https://headline.taobao.com/feed/feedList.htm?spm=a21bo.2017.226762.4.5af911d9tQalGz">

<img src="C:/Users/ASUS/Desktop/网络设备管理/各学科—百度摘文/前端/CSS+HTML/素材/淘宝/taobao/img/pic5.png">

<h4>万圣节去哪玩？良阅二次元游园会等你来！</h4>

<p>哈喽，大家好，我是你们的微漫酱！万圣节快要到了，在此推荐给大家一个好玩的二次元线下活动，一起来了解一下把！</p>

</a>

</div>



</div>

</div>







<!-- 这是总体的右边部分 -->
<div class="col-right">

<!-- 分为五部分 -->



<!-- 会员登录部分 -->
<div class="memeber">


<!-- 头像部分和“领淘金币抵钱”和“会员俱乐部”部分 
    而这些都以a标签实现-->
<div class="memeber-header">


<!-- 头像部分 -->
  <div class="header">

<a href="">

</a>

  </div>

<span class="info">hi!你好</span>

<p>

<a href="https://taojinbi.taobao.com/index.htm?spm=a21bo.2017.201864-1.d3.5af911d9JFOO5q&auto_take=true" class="icon">

<!-- 用来放置金币图标部分 -->
<span></span>

领淘金币抵钱

</a>

<a href="https://vip.taobao.com/vipHomeNew2.htm?spm=a21bo.2017.201864-1.3.5af911d9JFOO5q" class="club">

<!-- 用来放置金币图标部分 -->
<span></span>

会员俱乐部

</a>

</p>

</div>


<!-- 放置三个按钮的容器。 -->
<div class="memeber-font">



<a href="https://login.taobao.com/member/login.jhtml?spm=a21bo.2017.201864-2.d1.5af911d9v6oJxK&f=top&redirectURL=http%3A%2F%2Fwww.taobao.com%2F" class="login">登录</a>



<a href="https://reg.taobao.com/member/reg/fill_mobile.htm">注册</a>


<a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fopenshop.taobao.com%2Fopenshop%2Fwelcome.htm%3Fspm%3Da21bo.2017.201864-2.3.5af911d9v6oJxK%26">开店</a>






</div>



</div>




<!-- 信息举报部分 -->
<div class="message">


<a href="http://report.12377.cn:13225/toreportinputNormal_anis.do?spm=a21bo.2017.0.0.5af911d9v6oJxK&file=toreportinputNormal_anis.do">

网上有害信息举报专区


<!-- 右三角以span标签背景图片的形式展示出来 -->
<span></span>


</a>




</div>




<!-- 公告区域 :分为两部分-->
<div class="notice">


<!-- 标题部分 -->
<div class="title">



<ul>

<li><a href="https://press.taobao.com/detail.html?spm=a21bo.2017.201865-nav.1.5af911d9v6oJxK&postId=8281751">公告</a></li>
<li><a href="https://rule.taobao.com/index.htm?spm=a21bo.2017.201865-nav.2.5af911d9v6oJxK">规则</a></li>

<!-- 有一个是默认选中部分 -->
<li><a href="https://index.bbs.taobao.com/home.html?spm=a21bo.2017.201865-nav.3.5af911d9v6oJxK" class="active">论坛</a></li>
<li><a href="https://110.alibaba.com/policeHall/hallIndex.htm?spm=a21bo.2017.201865-nav.4.5af911d9v6oJxK&from=taobaoshouye">安全</a></li>
<li><a href="https://gongyi.taobao.com/?spm=a21bo.2017.201865-nav.5.5af911d9v6oJxK">公益</a></li>


</ul>




</div>



<!-- 内容文字部分 -->
<div class="content">




<ul>

<!-- 默认选中状态：文字是橙红色的 -->
<li><a href="https://yingxiao.taobao.com/gps/1212/4801?spm=a21bo.2017.201865.5.5af911d9v6oJxK" class="active">淘宝1212活动招商</a></li>

<li><a href="https://qianniu.bbs.taobao.com/detail.html?spm=a21bo.2017.201865.6.5af911d9v6oJxK&postId=8465054">中差评功能升级</a></li>
<li><a href="https://liao.bbs.taobao.com/detail.html?spm=a21bo.2017.201865.7.5af911d9v6oJxK&postId=8462928">陌生人拼团</a></li>
<li><a href="https://codestore.aliyun.com/index.htm">上线运营神器年中大促</a></li>


</ul>







</div>



</div>







<!-- 模块区域 -->
<div class="module">



<ul>

<li><a href="https://wt.taobao.com/?spm=a21bo.2017.201866.1.5af911d9QyAar4&ks-menu=cz">

<!-- 图片部分：因为每一个的背景图片都不一样
    所以要有单独的类名class。
 -->
<span class="icon1"></span>


<!-- 文字部分 -->
<p>充话费</p>

</a></li>


<li><a href="">

<span class="icon2"></span>

<p>旅行</p>

</a></li>

<li><a href="">

<span class="icon3"></span>

<p>车险</p>

</a></li>



<li><a href="">

<span class="icon4"></span>

<p>游戏</p>

</a></li>


<li><a href="">

<span class="icon5"></span>

<p>彩票</p>

</a></li>




<li><a href="">

<span class="icon6"></span>

<p>电影</p>

</a></li>

<li><a href="">

<span class="icon7"></span>

<p>酒店</p>

</a></li>



<li><a href="">

<span class="icon8"></span>

<p>理财</p>

</a></li>


<li><a href="">

<span class="icon9"></span>

<p>找服务</p>

</a></li>




<li><a href="">

<span class="icon10"></span>

<p>演出</p>

</a></li>

<li><a href="">

<span class="icon11"></span>

<p>水电煤</p>

</a></li>



<li><a href="">

<span class="icon12"></span>

<p>火车票</p>

</a></li>





</ul>








</div>





<!-- app区域 -->
<div class="app">


<div class="app-top">

<span>阿里APP</span>

<a href="https://www.taobao.com/tbhome/page/app-lists?spm=a21bo.2017.201869.1.5af911d9QyAar4" class="gengduo">更多></a>

</div>



<div class="app-buttom">



<ul>

<li><a href=""><span class="tubiao1"></span></a></li>


<li><a href=""><span class="tubiao2"></span></a></li>


<li><a href=""><span class="tubiao3"></span></a></li>


<li><a href=""><span class="tubiao4"></span></a></li>


<li><a href=""><span class="tubiao5"></span></a></li>


<li><a href=""><span class="tubiao6"></span></a></li>


<li><a href=""><span class="tubiao7"></span></a></li>


<li><a href=""><span class="tubiao8"></span></a></li>


<li><a href=""><span class="tubiao9"></span></a></li>


<li><a href=""><span class="tubiao10"></span></a></li>


</ul>











</div>





</div>


</div>





</div>







</div>




</div>



</body>

</html>